<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script src="./axios.js"></script>
  <script>
    /*
      请求拦截器 -- 在发送ajax 之前 将请求拦住 进行相关的配置
      响应拦截器 -- 数据从后台返回以后，统一对数据进行格式化处理
    */
    axios.defaults.baseURL = 'http://127.0.0.1'
    // 参数config 中包含了请求头 请求数据 请求方式等信息
    axios.interceptors.request.use(function (config) {
      config.headers.mytoken = 'acvgadas'
      // mytoken 不是写死的 是后台规定的 后台写什么就写什么
      // 如果想设置请求头，可以直接通过config这个字段挂载
      return config
    }, function (error) {
      // 请求拦截器：就是在数据发送到服务器之前，半路拦截 再次添加一些必要的属性
      // 响应拦截器： 就是数据渲染到页面之前 半路拦截 将数据清洗格式化 页面使用哪些 就返回那些
      return Promise.reject(error)
    })

    axios.interceptors.response.use((response) => {
      // 这个response 是指后台返回 被axios 包裹好以后的数据
      // 但是这个数量比较繁琐 很多属性开发中不需要
      // 所以需要将data 真正使用的数据 从 response 中取出
      console.log(response);
      data = response.data
      return data
    }, (error) => {
      return Promise.reject(error)
    })
  </script>
</body>

</html>